<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>요즘에 가입해보세요.</title>
	<link type="text/css" rel="stylesheet" href="/css/common.css" />
	<style type="text/css">
		body { text-align: center; }
	</style>
	<script type="text/javascript" src="/js/jigu.min.js"></script>
</head>
<body>
<p>
	<a class="title" href="http://yozmcup.appspot.com/">yozmCup</a>
</p>

<div class="common_box r1 shadow1">
	<form id="joinForm" name="joinForm" method="post" action="/YozmJoin" onSubmit="doJoin(); return false;">
		<p class="msg"><strong>'요즘컵' 은 요즘 가입 후 사용할 수 있습니다.</strong><br /><br /></p>
		<p>
			<label for="nickname" class="join_label">닉네임</label>
			<input type="text" id="nickname" name="nickname" /><span id="nickResult" class="check_result"></span>
			<input type="hidden" id="nicknameCheck" name="nicknameCheck" />
		</p>
		<p>
			<label for="sex" class="join_label">성별</label>
			<select id="sex" name="sex" class="wn">
				<option value="N">비공개</option>
				<option value="F">여자</option>
				<option value="M">남자</option>
			</select>
		</p>
		
		<p>
			<label for="birthday" class="join_label">생일</label>
			<input type="text" id="birthday" name="birthday" placeholder="yyyy-mm-dd" /><span id="birthdayResult" class="check_result"></span>
			<input type="hidden" id="birthdayCheck" name="birthdayCheck" value="200" />
		</p>
		
		<p>
			<label for="bloodType" class="join_label">혈액형</label>
			<select id="bloodType" name="bloodType" class="wn">
				<option value="N">비공개</option>
				<option value="A">A</option>
				<option value="B">B</option>
				<option value="AB">AB</option>
				<option value="O">O</option>
			</select>
		</p>
		
		<p class="align_c">
			<br /><br />
			<input type="button" id="join" name="join" value="요즘 가입하기" />
		</p>
	</form>
</div>
<script type="text/javascript">
	function doJoin(){
		if($("nicknameCheck").value==200 && $("birthdayCheck").value==200){
			$("joinForm").submit();
		}else if($("nicknameCheck").value!=200){
			alert("닉네임은 필수사항입니다. 알맞은 닉네임을 입력해주세요.");
		}else if($("birthdayCheck").value!=200){
			alert("생년월일을 올바르게 입력해주세요.");
		}		
	}
	
	(function(){
		var oldNickname;
		var nicknameChecker = false;
		var birthdayChecker = false;
		var oldBirthday;
	
		function startCheckNickname(){
			nicknameChecker = true;
			checkNickname();
		}
	
		function startCheckBirthday(){
			birthdayChecker = true;
			checkBirthday();
		}
		
		function checkNickname(){
			if(!nicknameChecker){
				return;
			}
			var nickname = $("nickname").value;
			if(oldNickname != nickname){
				new daum.Ajax({onsuccess:function(r){
					var result = daum.Ajax.jsonToObject(r.responseText);
					$("nickResult").innerHTML = result.status==200?"사용가능한 닉네임입니다.":result.result_msg;
					$("nicknameCheck").value = result.status;
					oldNickname = nickname;
					setTimeout(checkNickname, 500);				
				}}).request("/CheckNick?nickname="+encodeURIComponent(nickname));  
			}else{
				setTimeout(checkNickname, 500);
			}
		}
		
		function checkBirthday(){
			if(!birthdayChecker){
				return;
			}
			var birthday = $("birthday").value;
			if(birthday==""){
				$("birthdayResult").innerHTML = "";
				$("birthdayCheck").value = 200;
			}else{
				if(oldBirthday != birthday){
					if(!birthday.match(/\d{4}-\d{1,2}-\d{1,2}/)){
						$("birthdayResult").innerHTML = "알맞은 날짜 형태를 입력해주세요. (1900-1-1)";
						$("birthdayCheck").value = 0;
					}else{
						$("birthdayResult").innerHTML = "";
						$("birthdayCheck").value = 200;
					}
				}
			}
			oldBirthday = birthday;
			timer = setTimeout(checkBirthday, 500);
		}
	
		daum.Event.addEvent($("nickname"), "focus", startCheckNickname);
		daum.Event.addEvent($("nickname"), "blur", function(){ nicknameChecker = false; });
		daum.Event.addEvent($("birthday"), "focus", startCheckBirthday);
		daum.Event.addEvent($("birthday"), "blur", function(){ birthdayChecker = false; });
		daum.Event.addEvent($("join"), "click", doJoin);
	})();
</script>

</body>
</html>